<style lang="scss" >
@import "./uv.scss";
</style>
<template>
  <div class="modifyInventory">
    <div style="height: 1px;background: #EFEFEF;width:100%"></div>
    <div class=" p1757742262 oy" style="height: calc(100vh - 45px - 142rpx);transition: 0.3s;" :style="{transform: `translateY(${translateY}px)`}">
      <div class="f pl30 bfff pr30 pt30 pb30">
        <img class="p1757741319" :src="form.images && form.images.length && form.images[0]" alt="">
        <div class="p1757559797 pl30">
          <div class="w100  single-line fw500 fz30 ">{{form.store_name}}</div>
          <div class=" pt20  fz28" style="color: #666666">当前总库存 {{ form.stock }}</div>
        </div>
      </div>
      <div class="fz34 pt30 pb30 pl30" style="color: #666666;">规格价格</div>
      <uv-form errorType="toast" labelWidth="140rpx" labelPosition="left" :labelStyle="{fontSize: '30rpx',color: '#666666'}" :model="skuObject" ref="skuObject" :rules="rules">
        <div class="mb20 bfff" v-for="(item, index) in skuObject.skus" :key="index">
          <div v-if="form.spec_type == 1" class="f p1757641432 pl30 pr30 pt30 pb30">
            <img class="p1757741291" :src="item.image" alt="">
            <div class="p1757559797 pl30">
              <div class="w100  single-line fw500 fz30 ">{{item.name}}</div>
              <div class=" pt10  fz28" style="color: #666666">当前库存 {{ item._stock }}</div>
            </div>
          </div>
          <div class=" p1757641432 pl30 pr30 pt30 pb30 ">
            <uv-form-item label="增减库存">
              <div class="f aic">
                <uv-radio-group labelColor="#666666" iconSize="0" size="0" v-model="item.radio">
                  <uv-radio label="增" name="1">
                    <div class="p1757746953" :class="item.radio == 1 && 'p1757747069'">增</div>
                  </uv-radio>
                  <uv-radio label="减" name="2">
                    <div class="p1757746953" :class="item.radio == 2 && 'p1757747069'">减</div>
                  </uv-radio>
                </uv-radio-group>
                <div @click="openKeyboardTap(index, item.stock, 'stock')" class="p1757733431 pl20">
                  <!-- <uv-input fontSize="30rpx" readonly color="#333" border="none" v-model.trim="item.stock" placeholder="请输入" placeholderStyle="color:#C9CACA;font-size:30rpx"></uv-input> -->
                  <div :id="`skuObject-skus-stock-${index}`" :class="!item.stock && 'cD8D8D8'" class="p1757903903 number-container">{{ item.stock || '请输入' }}<div class="cursor-blink" v-if="currentId ==  `skuObject-skus-stock-${index}`">|</div>
                  </div>
                </div>
              </div>
            </uv-form-item>
          </div>
          <div class=" p1757641432  pl30 pr30 pt30 pb30 ">
            <uv-form-item label="改后库存">
              <div class="fz30" v-if="item.radio == 1">{{ Number(item._stock) + Number(item.stock)}}</div>
              <div class="fz30" v-if="item.radio == 2">{{ Number(item._stock) - Number(item.stock)}}</div>
              <!-- <uv-input fontSize="30rpx" readonly color="#333" border v-model.trim="item.market_price" placeholder="请输入" placeholderStyle="color:#C9CACA;font-size:30rpx"></uv-input> -->
            </uv-form-item>
          </div>
        </div>
      </uv-form>

    </div>
    <div class="pb30 common-footer bfff f aic jcsb  pl30 pr30 p1757733046 pt30" style="height: 142rpx;overflow: hidden; box-sizing: border-box;">
      <button v-if="form.spec_type == 1" @click="batchModifyTap" class="p1757732970 common-button  fz34" style="height: 90rpx;">批量修改</button>
      <button @click="submitTap" class="p1757732979 common-button  fz34" style="height: 90rpx;">确认</button>
    </div>
    <div class="lh1 bfff">
      <uv-safe-bottom />
    </div>
    <u-lst-keyboard :tooltip="false" :dotDisabled="true" @close="keyboardClose" @change="keyboardConfirm" ref="LkeyboardVue" :text="tips">
      <div v-show="isBatchSet" class="bfff">
        <div class="position-r p1757641432  f aic  jcc pb30 pt30">
          <div @click="cancalTap" class="position-a fz34" style="left: 30rpx;color: #9FA0A0">取消</div>
          <div style="text-align: center;" class="w100 fz34">批量设置</div>
          <div @click="submitPopTap" class="position-a fz34" style="right: 30rpx;color: #D60012">确认</div>
        </div>
        <div class="">
          <div class="f pl30 pb30 pt30 p1757641432 aic">
            <div class="fz30 fac pr30" style="color: #666666;">每个规格库存</div>
            <uv-radio-group labelColor="#666666" iconSize="0" size="0" v-model="radio">
              <uv-radio label="增" name="1">
                <div class="p1757746953" :class="radio == 1 && 'p1757747069'">增</div>
              </uv-radio>
              <uv-radio label="减" name="2">
                <div class="p1757746953" :class="radio == 2 && 'p1757747069'">减</div>
              </uv-radio>
            </uv-radio-group>
            <div class="p1757733431  pl20">
              <!-- <uv-input fontSize="30rpx" readonly color="#333" border="none" v-model.trim="" placeholder="请输入" placeholderStyle="color:#C9CACA;font-size:30rpx"></uv-input> -->
              <div :class="!stock && 'cD8D8D8'" class="p1757903903 number-container">{{ stock || '请输入' }}<div class="cursor-blink">|</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </u-lst-keyboard>
  </div>
</template>

<script>

import myLayOutVue from './components/layOut.vue'
import { detailGoods, setStock, delGoods, setUpApi } from "@/api/merchant.js";
import commonMixin from "./mixin/common.js";
import pageMixin from "./mixin/page.js";
import LkeyboardVue from '@/components/Lkeyboard.vue'

export default {
  components: {
    'u-my-layOut': myLayOutVue,
    'u-lst-keyboard': LkeyboardVue,
  },
  mixins: [commonMixin, pageMixin],
  data() {
    return {
      dotDisabled: true,
      translateY: 0,
      translatePopupY: 0,
      currentId: '',
      isBatchSet: false,
      isOpenPricePop: false,
      stock: '', radio: '1',
      list: [],
      valueIndex: null,
      valueProp: '',
      tips: '',
      statusBarHeight: 0,
      routeQuery: {},
      form: {},
      rules: {},
      skuObject: {},
      keyboardsHeight: 0,
      copyKeyboardsHeight: 0
    }
  },


  onShow() {

  },
  onLoad(options) {
    if (options) this.routeQuery = options
    this.initPage()
  },
  methods: {
    initPage() {
      detailGoods(this.routeQuery.id).then(res => {
        if (res.code === 200) {
          if (res.result.spec_type == 0) {
            res.result.sku_object = {
              skus: [{ radio: '1', stock: '', _stock: res.result.stock && (Number(res.result.stock) + '') }]
            }
          } else {
            res.result.sku_object.skus.forEach(item => {
              item.stock = item.stock && (Number(item.stock) + '')
              item._stock = item.stock
              item.stock = ''
              item.radio = '1'
              item.name = item.spec_values.join(',')
            })
          }

          this.skuObject = res.result.sku_object
          this.form = res.result

          this.$nextTick(() => {
            this._initRules()
          })

        }
      })
    },
    submitTap() {
      this.$refs.skuObject.validate().then(res => {
        let data = JSON.parse(JSON.stringify(this.form))
        let form = {
          id: data.id,
          spec_type: data.spec_type
        }
        if (data.spec_type == 0) {
          form.stock = this.skuObject.skus[0].stock
        } else {
          form.skus = JSON.parse(JSON.stringify(this.skuObject.skus)).map(item => {
            if (item.radio == 1) {
              item.stock = Number(item._stock) + Number(item.stock)
            }
            if (item.radio == 2) {
              item.stock = Number(item._stock) - Number(item.stock)
            }
            return item
          })
        }

        uni.showLoading({ title: '请求中', mask: true })
        setStock(form).then(res => {
          if (res.code === 200) {
            uni.$uv.toast('修改成功')
            this.initPage()
            setTimeout(() => {
              uni.hideLoading()
            }, 1000)
          }
        })
      })
    },
    submitPopTap() {
      this.skuObject.skus.forEach((i, iI) => {
        i.radio = this.radio
        if (this.radio == '2') {
          if (Number(i['_stock']) < Number(this.stock)) {
            i.stock = i['_stock']
          } else {
            i.stock = this.stock || ''
          }
        } else {
          i.stock = this.stock
        }
      })
      this.$refs.LkeyboardVue.close()
      this.$nextTick(() => {
        this._clearPop()
      })
    },
    // 关闭弹框
    cancalTap() {
      this.isBatchSet = false
      this.$refs.LkeyboardVue.close()
      this.$nextTick(() => {
        this._clearPop()
      })
    },

    batchModifyTap() {
      this.keyboardClose()
      this.$nextTick(() => {
        this.isBatchSet = true
        this.isOpenPricePop = true
        this.valueProp = 'stock'
        this.$refs.LkeyboardVue.open()
      })
    },
    _initRules() {
      let rules = {}
      if (this.skuObject && this.skuObject.skus && this.skuObject.skus.length) {
        this.skuObject.skus.forEach((i, iI) => {
          rules[`skus.${iI}.stock`] = { type: 'string', required: true, message: '', trigger: ['blur', 'change'] }
        })
        this.rules = rules
      }
    },

    keyboardChange(value) {
      this.stock = value
    },
    openKeyboardTap(valueIndex, tipsValue, prop) {
      this.currentId = `skuObject-skus-${prop}-${valueIndex}`
      this.tips = tipsValue
      this.valueIndex = valueIndex
      this.valueProp = prop
      this.$nextTick(() => {
        this.$refs.LkeyboardVue.open((keyboardHeight, keyboardTop) => {
          if (this.keyboardHeight == 0) this.keyboardHeight = keyboardHeight
          if (this.keyboardTop == 0) this.keyboardTop = keyboardTop
          uni.createSelectorQuery().in(this).select('#' + this.currentId).boundingClientRect(data => {
            if ((keyboardTop - keyboardHeight) < (data.top + data.height)) {
              this.translateY = -(((data.top + data.height) - (keyboardTop - keyboardHeight)) + this.safeAreaInsetsBottom + 10)
            }
          }).exec();
        })
      })
    },
    keyboardConfirm(value) {
      if (this.isOpenPricePop) {
        this[this.valueProp] = value && String(value)
      } else {
        let data = this.skuObject.skus[this.valueIndex]
        if (data['_stock'] < value && data['radio'] == '2') {
          this.$set(this.skuObject.skus[this.valueIndex], this.valueProp, data['_stock'])
        } else {
          this.$set(this.skuObject.skus[this.valueIndex], this.valueProp, value && String(value))
        }
      }
    },
    _clearPop() {
      this.isOpenPricePop = false
      this.isBatchSet = false
      this.valueIndex = ''
      this.stock = ''
      this.radio = '1'
    },
    keyboardClose() {
      this.translateY = 0
      this.translatePopupY = 0
      this.valueProp = ''
      this.currentId = ''
      this.stock = ''
      this.isOpenPricePop = false
      this.isBatchSet = false
      this.tips = ''
    }
  }
}
</script>
<style>
page {
  background-color: #f7f8f8;
  color: #333;
}
</style>
<style lang="scss" scoped>
@import "./common.scss";
.p1757733046 {
  width: 100%;
  box-sizing: border-box;
    .p1757732979 {
    background: #de0012 !important;
    color: #fff !important;
    width: 100%;
  }
  .p1757732970 {
    width: 40% !important;
    min-width: 35% !important;
    border: 2rpx solid #e60012;
    color: #e60012 !important;
    margin-right: 30rpx !important;
  }

  .common-button {
    border-radius: 8rpx !important;
  }
}

.p1757641432 {
  border-bottom: 1rpx solid #f2f2f2;
}
.p1757640541 {
  width: 170rpx;
}
.p1757741291 {
  width: 90rpx;
  min-width: 90rpx;
  height: 90rpx;
  min-height: 90rpx;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1rpx solid #e6e6e6;
}
.p1757741319 {
  width: 130rpx;
  height: 130rpx;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1rpx solid #e6e6e6;
}
.p1757733431 {
  border-radius: 8rpx;
  overflow: hidden;
  height: 55rpx;
  width: 300rpx;
  .p1757741587 {
    width: 57rpx;
    min-width: 57rpx;
    height: 100%;
    border-left: 1rpx solid #cfcfcf;
    background: #f7f7f7;
    margin-left: 20rpx;
  }
}
.p1757746953 {
  background: #f6f4f7;
  padding: 7rpx 25rpx;
  font-size: 30rpx;
  color: #666666;
  border: 1rpx solid #c9caca;
}
.uv-radio.uv-radio-label--left:nth-child(1) {
  .p1757746953 {
    border-radius: 8rpx 0 0 8rpx;
  }
  .p1757747069 {
    background: #fef2f3;
    color: #d60012;
    border-color: #ffd4d7;
    border-right: none;
  }
}
.uv-radio.uv-radio-label--left:nth-child(2) {
  .p1757746953 {
    border-radius: 0 8rpx 8rpx 0;
  }
  .p1757747069 {
    background: #fef2f3;
    color: #d60012;
    border-color: #ffd4d7;
    border-left: none;
  }
}

.modifyInventory {
  .p1757733431 {
    ::v-deep .uv-input {
      padding: 0 !important;
    }
  }
  .p1757742262 {
    ::v-deep .uv-form-item__body {
      padding: 0 !important;
    }
  }
  .p1757641432 {
    ::v-deep .uv-radio__icon-wrap--circle {
      display: none !important;
    }

    ::v-deep .uv-radio__label-wrap {
      margin: 0 !important;
      padding: 0rpx !important;
    }

    ::v-deep .uv-radio-group--row {
      overflow: hidden !important;
      flex: none !important;
    }
  }
}
.p1757750019 {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(100vh);
  }
  to {
    opacity: 1;
  }
}
.p1757903903 {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  height: 100%;
}
</style>

